Data Exploration হচ্ছে ডেটার গভীরে প্রবেশ করা এবং বিভিন্ন দৃষ্টিকোণ থেকে সেটি বিশ্লেষণ করা। এটি ডেটা সাইন্সের একটি অত্যন্ত গুরুত্বপূর্ণ অংশ, যেখানে ডেটা থেকে প্যাটার্ন, ট্রেন্ড, এবং সম্পর্ক বের করা হয়। Google Charts API ব্যবহার করে আপনি Data Exploration এর জন্য শক্তিশালী এবং ইন্টারঅ্যাকটিভ চার্ট তৈরি করতে পারেন। এই প্রক্রিয়াতে আপনি সহজেই ডেটা ফিল্টার, জুম ইন, বা বিভিন্ন পর্যায়ে বিশ্লেষণ করতে পারেন।

এখানে আমরা বিভিন্ন Chart Types (যেমন: Bar Chart, Line Chart, Pie Chart, Scatter Chart) এবং Interactivity ফিচারের মাধ্যমে কিভাবে ডেটা এক্সপ্লোরেশন করা যায়, সেটি দেখাবো।

Step 1: Angular প্রজেক্ট তৈরি এবং Google Charts ইন্সটল করা

প্রথমে একটি নতুন Angular প্রজেক্ট তৈরি করুন এবং Google Charts ইন্সটল করুন।

ng new data-exploration
cd data-exploration
npm install angular-google-charts

এটি ইন্সটল হওয়ার পর angular-google-charts আপনার node_modules ফোল্ডারে যুক্ত হয়ে যাবে।

Step 2: GoogleChartsModule ইমপোর্ট করা

এখন, app.module.ts ফাইলে GoogleChartsModule ইমপোর্ট করতে হবে।

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { GoogleChartsModule } from 'angular-google-charts'; // GoogleChartsModule ইমপোর্ট

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    GoogleChartsModule // এখানে GoogleChartsModule যোগ করুন
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Step 3: Chart Data Exploration উদাহরণ তৈরি করা

এখন আমরা Data Exploration এর জন্য বিভিন্ন ধরনের চার্ট এবং ইন্টারঅ্যাকটিভ ফিচার তৈরি করব। আমরা উদাহরণস্বরূপ একটি Bar Chart, Pie Chart, এবং Scatter Chart তৈরি করব, যেখানে ইউজার ডেটা এক্সপ্লোর করতে পারবেন।

AppComponent (app.component.ts):

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Data Exploration Example';

  // Chart Types
  chartTypeBar = 'BarChart';
  chartTypePie = 'PieChart';
  chartTypeScatter = 'ScatterChart';

  // Data for different charts
  chartDataBar = [
    ['Category', 'Value'],
    ['Work', 8],
    ['Eat', 2],
    ['Commute', 2],
    ['Watch TV', 2],
    ['Sleep', 8]
  ];

  chartDataPie = [
    ['Task', 'Hours per Day'],
    ['Work', 8],
    ['Eat', 2],
    ['Commute', 2],
    ['Watch TV', 2],
    ['Sleep', 8]
  ];

  chartDataScatter = [
    ['Time', 'Sales'],
    [1, 20],
    [2, 40],
    [3, 60],
    [4, 80],
    [5, 100]
  ];

  // Chart Options
  chartOptionsBar = {
    title: 'Work vs Leisure Time',
    hAxis: { title: 'Category' },
    vAxis: { title: 'Hours' },
    width: 600,
    height: 400
  };

  chartOptionsPie = {
    title: 'Daily Activities Distribution',
    pieHole: 0.4,
    width: 600,
    height: 400
  };

  chartOptionsScatter = {
    title: 'Sales Over Time',
    hAxis: { title: 'Time' },
    vAxis: { title: 'Sales' },
    width: 600,
    height: 400
  };

  // Interaction Methods
  onChartClick(event) {
    alert('You clicked on a chart point');
  }

  onChartSelection(event) {
    const selection = event.selection;
    if (selection.length > 0) {
      const selectedItem = selection[0];
      const rowIndex = selectedItem.row;
      alert(`You selected: ${this.chartDataBar[rowIndex][0]} with value: ${this.chartDataBar[rowIndex][1]}`);
    }
  }
}

Step 4: HTML ফাইলে Chart রেন্ডার করা এবং ইন্টারঅ্যাকশন যুক্ত করা

এখন, app.component.html ফাইলে আমরা Bar Chart, Pie Chart, এবং Scatter Chart রেন্ডার করব এবং তাদের ইন্টারঅ্যাকশন হ্যান্ডেল করব।

app.component.html:

<h1>{{ title }}</h1>

<!-- Bar Chart -->
<google-chart 
  [type]="chartTypeBar" 
  [data]="chartDataBar" 
  [options]="chartOptionsBar" 
  (chartClick)="onChartClick($event)">
</google-chart>

<!-- Pie Chart -->
<google-chart 
  [type]="chartTypePie" 
  [data]="chartDataPie" 
  [options]="chartOptionsPie">
</google-chart>

<!-- Scatter Chart -->
<google-chart 
  [type]="chartTypeScatter" 
  [data]="chartDataScatter" 
  [options]="chartOptionsScatter" 
  (chartSelection)="onChartSelection($event)">
</google-chart>

Step 5: Chart Interaction Handling

আমরা Chart Click এবং Chart Selection ইভেন্টগুলি হ্যান্ডেল করছি:

• Chart Click: ইউজার যখন চার্টের কোনো পয়েন্টে ক্লিক করবেন, তখন একটি বার্তা প্রদর্শিত হবে।
• Chart Selection: ইউজার যখন কোনো পয়েন্ট সিলেক্ট করবেন, তখন সিলেক্ট করা পয়েন্টের ডেটা প্রদর্শিত হবে।

Chart Interaction Event Handlers:

1. Chart Click: ক্লিক করার পর, ইউজারকে জানানো হবে যে তারা একটি পয়েন্টে ক্লিক করেছেন।
2. Chart Selection: সিলেক্ট করা পয়েন্টের তথ্য বের করে ইউজারকে দেখানো হবে।

Step 6: Real-Time Data Exploration

Real-Time Data Exploration এর জন্য আপনি setInterval বা WebSocket ব্যবহার করে ডেটা আপডেট করতে পারেন, যাতে চার্টের ডেটা ডায়নামিকভাবে পরিবর্তিত হয়। আমরা setInterval ব্যবহার করে কিছু ডেটা পরিবর্তন করে দেখাবো।

ngOnInit() {
  setInterval(() => {
    this.updateChartData();
  }, 5000);  // Update data every 5 seconds
}

updateChartData() {
  // Simulate data update by changing the values randomly
  this.chartDataBar = this.chartDataBar.map(item => {
    if (Array.isArray(item)) {
      return [item[0], Math.floor(Math.random() * 10) + 1];
    }
    return item;
  });
}

এখন, প্রতিটি 5 সেকেন্ড পর Bar Chart এর ডেটা আপডেট হবে এবং চার্টটি রিফ্রেশ হবে।

সারাংশ

Data Exploration এর জন্য Google Charts API এবং Angular ব্যবহার করে আপনি Scatter Plot, Pie Chart, Bar Chart, এবং Bubble Chart সহ বিভিন্ন চার্ট তৈরি করতে পারেন। ডেটা আপডেট এবং রিফ্রেশ করার জন্য আপনি Real-Time Data আপডেট এবং ইন্টারঅ্যাকটিভ ইভেন্ট (যেমন Chart Click এবং Chart Selection) ব্যবহার করে ইউজারের সাথে আরও ইন্টারঅ্যাকটিভ এবং ডায়নামিক যোগাযোগ তৈরি করতে পারেন।

এই প্রক্রিয়া আপনাকে ডেটা ভিজুয়ালাইজেশন ও এক্সপ্লোরেশন করতে এবং আরো বিস্তারিত তথ্য বের করতে সহায়তা করবে।